<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div>
            <div class="text-center">
              <userAvatar :user="state.user"/>
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user"/>
                用户名
                <div class="pull-right">{{ state.user.username }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone"/>
                手机号码
                <div class="pull-right">{{ state.user.mobile }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email"/>
                用户邮箱
                <div class="pull-right">{{ state.user.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree"/>
                所属部门
                <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.organizationName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples"/>
                拥有角色
                <div class="pull-right" v-if="state.user.roleNames?.length > 1">
                  <el-tooltip :content="state.user.roleNames.join('、')" class="pull-right">{{ state.user.roleNames[0] }}...</el-tooltip>
                </div>
                <div class="pull-right" v-else-if="state.user.roleNames?.length === 1">{{ state.user.roleNames[0] }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date"/>
                更新时间
                <div class="pull-right">{{ state.user.updateTime }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="sign"/>
                签名
                <div style="margin-top: 10px;">
                  <userSign :user="state.user" />
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
          </template>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="state.user"/>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd/>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import userAvatar from "@/views/profile/userAvatar"
import userSign from "@/views/profile/userSign"
import userInfo from "@/views/profile/userInfo"
import resetPwd from "@/views/profile/resetPwd"
import {reactive, ref} from "vue"
import {getUserId} from "@/config/cookie"
import {doGet} from "@/config/http"
import {svc} from "@/config/common"

const activeTab = ref("userinfo");
const state = reactive({
  user: {},
});

function getUser() {
  let userId = getUserId()
  doGet(svc, `/custom/getUserProfile/${userId}`, {}).then(async res => {
    state.user = res;
    if (res['roles']) {
      state.user.roleNames = []
      res['roles'].map(item => state.user['roleNames'].push(item.roleName))
    }
  })
}

getUser();
</script>
